<template>
    <div class="no-binding">
        <van-image :src="homeIcon" fit="contain" class="home-icon"/>
        <div class="box">
            <van-image :src="attentionIcon" fit="contain" class="attention-icon"/>
            <div class="content">
                <span>{{state.msg1}} </span><br/>
                <span>{{state.msg2}}</span>
            </div>
            <div class="footer">
                <span class="font-1D93EB know" @click="close">我知道了</span>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
    import attentionIcon from '@/assets/images/binding/attention.png'
    import homeIcon from '@/assets/images/binding/home.png'
    import { reactive, onMounted } from 'vue'
    import { useRoute } from 'vue-router'
    import { closeWindow } from '@/utils/util'

    interface State {
        msg1:any,
        msg2:any
    }

    const route = useRoute()
    const state:State = reactive({
        msg1:'',
        msg2:''
    })
    
    onMounted(() => {
        const query = route.query
        state.msg1 = query.msg1
        state.msg2 = query.msg2
        
    })

    function close() {
        closeWindow()
    }
</script>
<style lang="scss" scoped>
    .no-binding {
        position:fixed;
        bottom:0;
        top:0;
        width:100%;
        height:100%;
        background-color: #255fb6;
        .home-icon {
            position:fixed;
            bottom:0;
            left:0;
            right:0;
            z-index:-1;
        }
        .box {
            width:630px;
            height:490px;
            background:#fff;
            border-radius: 30px;
            margin:210px auto;
            text-align:center;
            .attention-icon {
                width:129px;
                height:129px;
                margin-top:64px;
            }
            .content {
                font-size:32px;
                color:#333;
                margin:46px 0 64px;
            }
            .footer {
                border-top:1px solid #f8f8f8;
                line-height:100px;
                color:#1D93EB;
                .know{
                    display: inline-block;
                    padding: 10px 20px;
                }
            }
        }
    }
</style>
    